<template>
    <div class="login-container">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
            <h2 class="login-title">梦学谷会员管理系统</h2>
            <el-form-item label="帐号" prop="username">
                <el-input v-model="form.username" clearable placeholder="请输入帐号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" placeholder="请输入密码">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">登录</el-button>
                <el-button type="primary" @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { login, getUserInfo } from "@/api/login";

export default {
    data() {
        return {
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: ""
            },
            rules: {
                username: [{ required: true, message: "请输入帐号", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }]
            }
        };
    },
    methods: {
        submitForm() {
            this.$refs.form.validate(valid => {
                // console.log(valid)
                if (valid) {
                    // 提交表单给后台进行验证是否正确
                    login(this.form.username, this.form.password).then(response => {
                        const resp = response.data;
                        console.log(resp, resp.flag, resp.data.token, resp.message);
                        if (resp.flag) {
                            // 验证成功, 通过token去获取用户信息
                            getUserInfo(resp.data.token).then(response => {
                                const respUser = response.data;
                                if (respUser.flag) {
                                    // 获取到了用户的数据
                                    console.log("userInfo", respUser.data);
                                    // 1. 保存 token ，用户信息
                                    localStorage.setItem("mxg-msm-user", JSON.stringify(respUser.data));
                                    localStorage.setItem("mxg-msm-token", resp.data.token);
                                    // 前往首页
                                    this.$router.push("/");
                                } else {
                                    this.$message({
                                        message: respUser.message,
                                        type: "warning"
                                    });
                                }
                                
                            });
                        } else {
                            // 未通过，弹出警告
                            // alert(resp.message)
                            this.$message({
                                message: resp.message,
                                type: "warning"
                            });
                        }
                    });
                } else {
                    console.log("验证失败");
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs["form"].resetFields();
        }
    }
};
</script>

<style>
.login-form {
    width: 350px;
    /* 上下间隙150px, 左右自动 */
    margin: 160px auto;
    /*透明背景色*/
    background-color: rgb(255, 255, 255, 0.8);
    padding: 30px;
    /* 圆角 */
    border-radius: 20px;
}

.login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../../assets/login.jpg");
    overflow: hidden;
}

.login-title {
    text-align: center;
    color: #303133;
}
</style>
